<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- tab选项卡 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="first">
            <!-- 公司 -->
            <tree-tools :tree-node="company" :is-root="true" @addDepts="addDeptsHandler" @editDepts="editDeptsHandler" />
            <!-- 树形控件 -->
            <el-tree class="node-tree" :data="departs" :default-expand-all="true" :props="defaultProps" icon-class="a" @node-expand="expandHandler" @node-collapse="collapseHandler">
              <!-- 插槽 -->
              <tree-tools slot-scope="{ data }" :tree-node="data" @delDepart="delDepartHandler" @addDepts="addDeptsHandler" @editDepts="editDeptsHandler" />
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 添加部门的组件 -->
    <add-dept :show-dialog.sync="showDialog" :p-node="pNode" :show-title="showTitle" :current-node.sync="currentNode" @addDepts="getDepartmentsList" />
  </div>
</template>

<script>
// 导入公共组件
import TreeTools from './components/tree-tools.vue'
// 导入添加部门的组件
import AddDept from './components/add-dept.vue'
// 导入api
import { getDepartments, delDepartment } from '@/api/departments'
// 导入公共的工具函数
import { _noLimitCate } from '@/utils'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      activeName: 'first',
      // 公司数据
      company: {
        name: '',
        manager: '',
        pid: ''
      },
      // 部门数据
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 控制添加部门组件的显示/隐藏
      showDialog: false,
      // 父节点
      pNode: {},
      // 当前要修改的节点
      currentNode: {},
      // 显示的对话框的标题
      showTitle: ''
    }
  },
  mounted() {
    this.getDepartmentsList()
  },
  methods: {
    // 展开时的处理函数
    expandHandler(obj, node) {
      const row = this.departs.find(item => item.name === obj.name)
      row.expanded = node.expanded
    },
    // 折叠时的处理函数
    collapseHandler(obj, node) {
      const row = this.departs.find(item => item.name === obj.name)
      row.expanded = !node.expanded
    },
    // 获取组织架构数据
    async getDepartmentsList() {
      const result = await getDepartments()
      console.log(result)
      // 原来data的company选项并没有name和manager属性，后面添加的属性并不是响应式的
      this.company.name = result.companyName
      this.company.manager = '负责人'
      // this.company = { name: result.companyName, manager: '负责人' }
      // 给部门数据赋值并处理成树状数据
      this.departs = _noLimitCate(result.depts, '')
    },
    // 删除组织架构
    async delDepartHandler(id) {
      try {
        await delDepartment(id)
        // 给提示信息
        this.$message.success('删除部门成功')
        // 重新获取数据
        this.getDepartmentsList()
      } catch (err) {
        console.log(err)
        this.$message.error('该部门是系统默认部门，不能删除')
      }
    },
    // 处理打开添加部门的组件对话框
    addDeptsHandler(pNode) {
      this.showDialog = true
      // 保存父节点
      this.pNode = pNode
      this.showTitle = '添加部门'
    },
    // 处理打开编辑部门的组件的对话框
    editDeptsHandler(node) {
      this.showDialog = true
      // 保存要修改的当前节点，方便通过props传递给子节点
      this.currentNode = node
      this.showTitle = '编辑部门'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  margin-top: 50px;
  margin-left: 100px;
}
.tree-card {
  padding: 30px;
  font-size: 14px;
}
::v-deep .el-tree-node__content {
  height: 40px;
  line-height: 40px;
}
</style>
